<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>街景</title>
    <style>
        body{margin: 0}
        html,body,.map-wrapper,#my-map{width: 100%;height: 100%;}
        .map-wrapper{ position: relative;}
        .zoomin80{
            width: 35px;
            height: 35px;
            background: url('./images/zoomin80.png') no-repeat;
            background-size: cover;
        }
        .zoomout80{
            width: 35px;
            height: 35px;
            background: url('./images/zoomout80.png') no-repeat;
            background-size: cover; 
            margin-top: 10px;
        }
        .jiejing{
            background: url('./images/streetmap80.png') no-repeat;
            background-size: cover;    
        }
    </style>
</head>
<body>
    <div class="map-wrapper">
        <div id="my-map"></div>
    </div>
    <script src="https://api.map.baidu.com/api?v=3.0&ak=e7SC5rvmn2FsRNE4R1ygg44n"></script>
    <script>
        var mapInstance = null; 
        var panorama = null;
        var lon = getParameterByName ("lon");
        var lat = getParameterByName ("lat");

        function getParameterByName (name) {
            var url = location.search
            url = decodeURIComponent(url)
            var theRequest = new Object()
            if (url.indexOf('?') != -1) {
                var str = url.substr(1)
                var strs = str.split('&')
                for (var i = 0; i < strs.length; i++) {
                    theRequest[strs[i].split('=')[0]] = unescape(strs[i].split('=')[1])
                }
            }
            return theRequest[name]
        };

        function setPanorama (lon,lat) {
            var panoramaService = new BMap.PanoramaService();
            panoramaService.getPanoramaByLocation(new BMap.Point(lon,lat), function (data) {
                if (data == null) {
                    alert("该位置暂时没有街景");
                    return;
                }
                var myData = data;
                panorama = mapInstance.getPanorama();//获取实例对象
                panorama.setId(myData.id);  //全景ID
                panorama.show(); //显示全景
            });
        }    

        function initMap(param) { 
            var blon =  lon ? lon : 113.864275;
            var blat =  lat ? lat : 22.566936;
            mapInstance = new BMap.Map('my-map', { minZoom: 4, maxZoom: 19, enableMapClick: false })
            mapInstance.enableScrollWheelZoom();
            mapInstance.enableDoubleClickZoom();
            mapInstance.enableAutoResize();
            mapInstance.centerAndZoom(new BMap.Point ( blon, blat ), 19);
            // BMAP_SATELLITE_MAP BMAP_NORMAL_MAP
            var mapTypeControl = new BMap.MapTypeControl({
                mapTypes:[BMAP_SATELLITE_MAP , BMAP_NORMAL_MAP]
            });
            mapInstance.addControl(mapTypeControl);
            
        } 

       
        function ZoomControl(){
            this.defaultAnchor = BMAP_ANCHOR_BOTTOM_RIGHT;
            this.defaultOffset = new BMap.Size(10, 10);
        }

        ZoomControl.prototype = new BMap.Control();

        ZoomControl.prototype.initialize = function(map){
            var divWrap = document.createElement("div");
            var divTop = document.createElement("div");
            var divBottom = document.createElement("div");
            divWrap.style.width = "35px";
            divWrap.style.height = "80px";
            divWrap.style.position = "relative";
            divTop.className = "zoomin80";    
            divBottom.className = "zoomout80";   
            divTop.onclick = function(e){
                mapInstance.setZoom(mapInstance.getZoom() + 1);
            }
            divBottom.onclick = function(e){
                mapInstance.setZoom(mapInstance.getZoom() - 1);
            }
            divWrap.appendChild(divTop);
            divWrap.appendChild(divBottom);
            mapInstance.getContainer().appendChild(divWrap);
            return divWrap;
        }

        function JieJingControl(){
            this.defaultAnchor = BMAP_ANCHOR_BOTTOM_LEFT;
            this.defaultOffset = new BMap.Size(10, 25);
        }

        JieJingControl.prototype = new BMap.Control();

        JieJingControl.prototype.initialize = function(map){
            var divWrap = document.createElement("div");
            divWrap.style.width = "35px";
            divWrap.style.height = "35px";
            divWrap.className = "jiejing";    
            divWrap.onclick = function(e){
                if(panorama !== null){
                    panorama.show(); 
                }else{
                    alert("该位置暂时没有街景");
                }
                 
            };
            mapInstance.getContainer().appendChild(divWrap);
            return divWrap;
        }

      
        function  addControl() { 
            var myZoomCtrl = new ZoomControl();
            var JieJingCtrl = new JieJingControl();
            mapInstance.addControl(myZoomCtrl);
            mapInstance.addControl(JieJingCtrl);
        }
        
        function addOverlay() { 
            var point = new BMap.Point ( lon, lat );
            var marker = new BMap.Marker(point,{});
            mapInstance.addOverlay(marker);
        }

        initMap();

        if(lon !== undefined && lat !== undefined){
            addOverlay(); 
            addControl();
            setPanorama (lon,lat);     
        }
            

    </script>
</body>
</html>